<template>
	<view>
		<view class="header">
			<image src="../../static/stock/left.png" mode="" @click="goback"></image>

			<view class="header-b">
				<view class="box" @tap="$open('deal')">交易</view>
				<view class="box" @tap="$open('arrears')">欠数</view>
				<view class="box" style="color:#249af6; background-color: #FFFFFF;">收支</view>
				<view class="box" @tap="$open('stock')">库存</view>
			</view>
		</view>

		<view class="tabbar">
			<view class="tab-v">
				<view class="tabbar-o">时间</view>
				<view class="tabbar-o">总进账</view>
				<view class="tabbar-o">总出账</view>
			</view>
			<view class="tab-v">
				<view
					class="tabbar-o"
					style="display: flex;flex-direction: row;justify-content: center;">
					<view class="uni-list" style="width: 33.33%; text-align: center;">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker @change="bindPickerChange" :value="index" :range="array">
									<view class="uni-input f26">{{ array[index] }}</view>
								</picker>
							</view>
						</view>
					</view>
					<image src="../../static/images/tb_down.png" mode="" style="margin-top: 15rpx; margin-left: 15rpx;"></image>
				</view>
				<view class="tabbar-o red ">{{ allInmoney }}</view>
				<view class="tabbar-o red ">{{ allOutmony }}</view>
			</view>
		</view>
		<view class="user">
			<view class="user-one">
				<view>
					<image src="../../static/slice/01.png" mode=""></image>
					现金
				</view>
				<view>
					<span>进￥{{ cash.in_money }}</span>
					<span class="user-span">出￥{{ cash.out_money }}</span>
				</view>
			</view>
			<view class="user-one">
				<view>
					<image src="../../static/slice/02.png" mode=""></image>
					支付宝
				</view>
				<view>
					<span>进￥{{ alipay.in_money }}</span>
					<span class="user-span">出￥{{ alipay.out_money }}</span>
				</view>
			</view>
			<view class="user-one">
				<view>
					<image src="../../static/slice/03.png" mode=""></image>
					微信
				</view>
				<view>
					<span>进￥{{ wechat.in_money }}</span>
					<span class="user-span">出￥{{ wechat.out_money }}</span>
				</view>
			</view>
			<view class="user-one">
				<view>
					<image src="../../static/slice/04.png" mode=""></image>
					银行卡
				</view>
				<view>
					<span>进￥{{ bank_card.in_money }}</span>
					<span class="user-span">出￥{{ bank_card.out_money }}</span>
				</view>
			</view>
			<view class="user-one">
				<view>
					<image src="../../static/slice/05.png" mode=""></image>
					其他
				</view>
				<view>
					<span>进￥{{ other.in_money }}</span>
					<span class="user-span">出￥{{ other.out_money }}</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			index: 0,
			array: ['今日', '昨日', '七日', '30日', '全部'],
			days: 0,
			cash: {},
			alipay: {},
			wechat: {},
			bank_card: {},
			other: {},
			allout_money: ''
		};
	},
	onLoad() {
		this.showAll();
	},

	methods: {
		goback() {
			uni.navigateBack({
				delta: 1
			});
		},
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.index = e.target.value;
			if (this.index == 0) {
				this.days == 1;
			}
			if (this.index == 1) {
				this.days == 2;
			}
			if (this.index == 2) {
				this.days == 7;
			}
			if (this.index == 3) {
				this.days == 30;
			}
			if (this.index == 4) {
				this.days == 0;
			}
		},
		showAll() {
			this.$ajax('api/v1.statistics/payments', {
				days: this.days
			})
				.then(res => {
					const { cash, alipay, wechat, bank_card, other } = res.result;
					this.cash = cash;
					this.alipay = alipay;
					this.wechat = wechat;
					this.bank_card = bank_card;
					this.other = other;
				})
				.catch(res => {
					console.log(Error);
				});
		}
	},
	computed: {
		allInmoney() {
			return +this.cash.in_money + +this.alipay.in_money + +this.wechat.in_money + +this.bank_card.in_money + +this.other.in_money;
		},
		allOutmony() {
			return +this.cash.out_money + +this.alipay.out_money + +this.wechat.out_money + +this.bank_card.out_money + +this.other.out_money;
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
	margin: 0;
	padding: 0;
}
.header {
	background-color: #249af6;
	padding: 70rpx 30rpx 20rpx 30rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	image {
		width: 21rpx;
		height: 38rpx;
	}
	.header-b {
		width: 441rpx;
		height: 59rpx;
		border: 2rpx #ffffff solid;
		margin: 0 auto;
		display: flex;

		.box {
			width: 25%;
			text-align: center;
			border-right: 2rpx solid #ffffff;
			color: #ffffff;
			font-size: 32rpx;
			line-height: 58rpx;
			font-family: PingFang SC;
			&:last-child {
				border-right: none;
			}
		}
	}
}
.tabbar {
	width: 100%;
	height: 127rpx;
	background-color: #ffffff;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	padding-top: 40upx;

	.tab-v {
		display: flex;
		justify-content: space-around;
		.tabbar-o {
			width: 33.333%;
			text-align: center;
		}
	}
	image {
		width: 17rpx;
		height: 10rpx;
		margin-left: 5rpx;
	}
}
.red {
	color: #f64444;
}
.user {
	margin-top: 20rpx;
	background-color: #ffffff;
	padding: 30rpx 0;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;

	.user-one {
		margin: 0;
		padding: 0;
		display: flex;
		height: 123rpx;
		line-height: 123rpx;
		justify-content: space-between;
		border-bottom: 3rpx solid #eeeeee;
		&:last-child {
			border-bottom: none;
		}
		image {
			width: 53rpx;
			height: 53rpx;
			vertical-align: middle;
			margin-left: 30rpx;
			margin-right: 25rpx;
		}
		.user-span {
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
			margin-left: 39rpx;
			padding-right: 30upx;
		}
	}
}
.move1 {
	position: relative;
	left: -22rpx;
}
.move-l {
	position: relative;
	left: -38rpx;
}
.move-y {
	position: relative;
	left: -26rpx;
}
</style>
